<template>
  <div>
    <van-nav-bar title="厨房助手" left-text="返回" right-text="我的"  left-arrow @click-left="back" @click-right="mine"/>

    <van-form @submit="onSubmit">
        <van-field v-model="authorId" name="authorId" label="作者id" placeholder="作者id" :rules="[{ required: false, message: '请填写作者id' }]"/>
        <van-field v-model="dish" name="dish" label="菜名" placeholder="菜名" :rules="[{ required: false, message: '请填写菜名' }]"/>
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
    </van-form>

    <ul v-if="flage">
        <li @click="detail(item)" v-for="item in list" :key="item.id">
            <div class="dishname">{{item.authorId}} - {{item.name}}</div>
            <div class="dishlist">
                <img :src="'http://124.93.196.45:10001/' + item.imgUrl" alt="">
                <div class="ingredients">{{item.ingredients}}</div>
            </div>
            <div>
                <i @click.stop="collect(item)" :class="item.myCollectionState ? 'icon-shoucang1':'iconfont icon-shoucang'" ><span>{{item.collectionCount}}</span></i>
                
                <i @click.stop="like(item)" :class="item.myLikeState ? 'icofont icon-dianzan_kuai' : 'iconfont icon-dianzan'" ><span>{{item.likeCount}}</span></i>
                
                
            </div>
        </li>
    </ul>
    <ul v-else>
        <li @click="detail(item)" v-for="item in data" :key="item.id">
            <div class="dishname">{{item.authorId}} - {{item.name}}</div>
            <div class="dishlist">
                <img :src="'http://124.93.196.45:10001/' + item.imgUrl" alt="">
                <div class="ingredients">{{item.ingredients}}</div>
            </div>
            <div>
                <i @click.stop="collect(item)" :class="item.myCollectionState ?'iconfont icon-shoucang1':'iconfont icon-shoucang'" ><span>{{item.collectionCount}}</span></i>
                
                <i @click.stop="like(item)" :class="item.myLikeState ? 'icofont icon-dianzan_kuai' : 'iconfont icon-dianzan'" ><span>{{item.likeCount}}</span></i>
                
                
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
import mixin from  "@/mixin/flag";
import {alldishes,dishescollection,disheslike} from "./Service"
export default {
    data(){
        return{
            authorId:'',
            dish:'',
            list:[],
            data:[],
            flage:true,
        }
    },
    mixins:[mixin],
    methods:{
        back(){
            this.$router.go(-1);
        },
        mine(){
            this.$router.push('/cook/mine');
        },
        async onSubmit(){
            let res = await alldishes({
                authorId:this.authorId,
                name:this.dish
            })
            console.log(res);
            this.data=res.data.rows;
            this.flage=false
        },
        async collect(item){
            // console.log(res);
            if(!item.myCollectionState){
                item.myCollectionState=true;
                let res = await dishescollection({
                dishesId:item.id,
                newState:item.myCollectionState
                })
                console.log(res);
                this.alldishes()
            }else{
                item.myCollectionState=false
                let res = await dishescollection({
                dishesId:item.id,
                newState:item.myCollectionState
                })
                console.log(res);
                this.alldishes()
            }
        },
        async like(item){
                       
            if(!item.myLikeState){
                item.myLikeState=true
                let res = await disheslike({
                dishesId:item.id,
                newState:item.myLikeState,
            })
            console.log(res);
            this.alldishes()
            }else{
                item.myLikeState=false
                let res = await disheslike({
                dishesId:item.id,
                newState:item.myLikeState,
            })
            console.log(res);
            this.alldishes()
            }
        },
        detail(item){
            this.$router.push(`/cook/detail/${item.id}`)
        },
        async alldishes(){
            let res = await alldishes({
                authorId:this.authorId,
                name:this.dish
            })
            console.log(res);
            this.list=res.data.rows;
        }
    },
    created(){
            this.alldishes()
        }
}
</script>

<style lang="scss" scoped>
ul{
    padding:20px;
    li{
        border: 1px solid #666;
        padding:20px;
        margin-bottom: 20px;
        .dishname{
            font-size:18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .dishlist{
            display: flex;
            margin-bottom: 10px;
            img{
                width: 100px;
                height: 100px;
            }
            .ingredients{
                flex:1;
                margin-left:15px;
                font-size: 16px;
                padding-top:20px;
            }
        }
        .icon-shoucang,.icon-shoucang1{
            font-size:20px;
            margin-right: 15px;
            font-weight: bold;
        }
        .icon-dianzan_kuai,.icon-dianzan{
            font-size:20px;
            font-weight: bold;
        }
        .icon-dianzan_kuai{
            color: red;
        }
        .icon-shoucang1{
            color:blue;
        }
        span{
                font-size:12px;
                line-height: 20px;
                margin-left: 5px;
            }
   
    }
}

</style>